<template>
    <!-- 头部部分 -->
    <el-page-header :icon="Fold"back-text="日志">
        <template #content>
        <span class="text-large font-600 mr-3"> 日志 </span>
        </template>
        <div class="right">
            <el-avatar
                :icon="UserFilled"
            />
            <span>15210418591</span>
        </div>
        <div class="white"></div>
    </el-page-header>
    <!-- 输入框 -->
    <div class="search">
            <el-input
                placeholder="按姓名搜索"
                :prefix-icon="Search"
            /> 
         <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
         <div style="margin-left: 332px;">
          <el-button type="info" :icon="Refresh" style="margin-left: 762px;border-radius: 8px;margin-top: 66px;
          transform: scale(1);" @click="handleRefresh">刷新</el-button>
        </div>
    </div>
    <!-- table表格 -->
       <table class="log-table">
        <thead>
            <tr>
            <th >设备码</th>
            <th >设备名称</th>
            <th >操作</th>
            <th >请求数据</th>
            <th >操作时间</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item,index) in logData" :key="index">
            <td>{{ item.code }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.operation }}</td>
            <td>{{ item.request_data }}</td>
            <td>{{ item.createdAt }}</td>
            </tr>
        </tbody>
    </table>
</template>

<script setup>
    import { Fold,Search,Refresh, UserFilled} from '@element-plus/icons-vue';
    import { ElPageHeader, ElInput} from 'element-plus';
    import { ref,onMounted} from 'vue'; // 导入ref
     import {
       getDeviceList
    } from '@/components/api/DeviceLog'
    const pageIndex = ref(1);    // 当前页
    const pageSize = ref(10);   // 每页条数
    const logData =ref([]);

    const handleSearch = () => {
        fetchData(); 
    };

    const handleRefresh = () => {
        fetchData();
    };
    const fetchData = () => {
        const requestData = {
            pageIndex: pageIndex.value,
            pageSize: pageSize.value,
        };
        getDeviceList(requestData).then(res => {
            if (res.code === 200) {
            logData.value = res.dataset.dataset.list;
        }
        });
    };

onMounted(() => {
  fetchData();
});     
</script>

<style lang="less" scoped>
    .right{
        width: 187px;
        height: 39px;
        float: right;
        margin-top: -40px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        .el-avatar--icon{
            width: 42px;
            height: 35px;
        }
    }
    .search{
        display: flex;
        .el-input{
            width: 250px;
            height: 30px;
            margin-top: 20px;
        }
        .el-select{
            width: 250px;
            height: 30px;
            margin-top: 20px;
            margin-left: 20px;
        }
        .el-button{
            width: 60px;
            height:30px ;
            margin-top: 20px;
            margin-left: 20px;
        }
     }
       .log-table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
            margin-top: 22px;
            }

        .log-table th, .log-table td {
            border: 1px solid #ccc;
            padding: 6px 13px;
            line-height: 2.6;
            text-align: left;
            font-size: 14px;
            word-wrap: break-word;
        }

        .log-table th {
            background-color: #f2f2f2;
            }
        /* 设置各列宽度比例 */
        .log-table th:nth-child(1),
        .log-table th:nth-child(2),
        .log-table th:nth-child(3),
        .log-table th:nth-child(5) {
            width: 15%;
            font-size: 15px;
        }
        
        .log-table th:nth-child(4) {
            width: 50%; 
            font-size: 15px;
        }
</style>